<template>
  <div
    class="scan-input-box"
    :class="disabled ? 'scan-input-box-disabeld' : ''"
  >
    <el-input
      ref="codeInput"
      v-model="code"
      :clearable="true"
      style="width: 400px"
      :disabled="disabled"
      placeholder="请扫码或输入条码"
      @keyup.enter.native="sacn"
      @input="(e) => (code = validSe(e))"
    >
      <template #prepend>产品条码</template>
    </el-input>
    <el-dialog
      title="扫描从码"
      width="30%"
      v-model="dialogSubCodeVisible"
      @close="handleSubClose"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="scan-dialog">
        <div class="info">
          <div class="name">
            产品名称：{{ productDetail && productDetail.commonName }}产品
          </div>
          <div class="receive">
            数量：{{ productDetail && productDetail.qty }}
          </div>
        </div>
        <el-input
          ref="subCodeRef"
          @keyup.enter.native="sacnSubCode"
          @input="(e) => (inputSubCode = validSe(e))"
          placeholder="请扫描从码"
          v-model="inputSubCode"
          clearable
        ></el-input>
      </div>
      <template #footer class="dialog-footer">
        <el-button @click="handleSubClose">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog
      title="扫描主码"
      width="30%"
      v-model="dialogMainCodeVisible"
      @close="handleMainClose"
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="scan-dialog">
        <el-input
          ref="mainCodeRef"
          @keyup.enter.native="sacnMainCode"
          @input="(e) => (inputMainCode = validSe(e))"
          placeholder="请扫描主码"
          v-model="inputMainCode"
          clearable
        ></el-input>
      </div>
      <template #footer class="dialog-footer">
        <el-button @click="handleMainClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ScanInputBox">
const { proxy } = getCurrentInstance()
const props = defineProps({
  query: {
    type: Object,
    default: undefined,
  },
  api: {
    type: Function,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const dialogSubCodeVisible = ref(false)
const dialogMainCodeVisible = ref(false)
const inputSubCode = ref('')
const inputMainCode = ref('')
const productDetail = ref(undefined)
const code = ref('')
const mainCode = ref('')
const params = ref({})

function sacn() {
  if (!code.value) {
    proxy.$message({
      message: '请扫描二维码',
      type: 'warning',
      duration: 3500,
      showClose: true,
    })
    return
  }
  props.query.queryParams.code = proxy.$fn.setTrim(code.value)
  props
    .api(props.query)
    .then((res) => {
      if (res && res.success) {
        console.log(res.data.flag == 0)
        if (res.data.flag == 0) {
          console.log(111221)
          scanResult(res.data.mergeDetail, res.data.detail)
          handleClose()
        } else if (res.data.flag == 1) {
          scanProgressSub()
        } else if (res.data.flag == 2) {
          console.log(props.query)
          scanProgressMain()
        }
      } else {
        code.value = ''
        delete props.query.queryParams.code
      }
    })
    .catch(() => {
      code.value = ''
      delete props.query.queryParams.code
    })
}
function sacnSubCode() {
  if (code.value) inputMainCode.value = code.value
  props.query.queryParams.subCode = proxy.$fn.setTrim(inputSubCode.value)
  props.query.queryParams.mainCode = proxy.$fn.setTrim(inputMainCode.value)
  if (props.query.queryParams.code) {
    delete props.query.queryParams.code
  }
  props
    .api(props.query)
    .then((res) => {
      if (res && res.success) {
        const flag = res.data && res.data.flag
        if (flag > -1) {
          scanResult(res.data.mergeDetail, res.data.detail)
          handleClose()
        } else {
          proxy.$message({
            message: `扫码报错！`,
            type: 'warning',
            duration: 3500,
            showClose: true,
          })
        }
      } else {
        inputSubCode.value = ''
        delete props.query.queryParams.subCode
      }
    })
    .catch(() => {
      inputSubCode.value = ''
      delete props.query.queryParams.subCode
    })
}
function sacnMainCode() {
  props.query.queryParams.subCode = proxy.$fn.setTrim(code.value)
  props.query.queryParams.mainCode = proxy.$fn.setTrim(inputMainCode.value)
  if (props.query.queryParams.code) {
    delete props.query.queryParams.code
  }
  props
    .api(props.query)
    .then((res) => {
      if (res && res.success) {
        const flag = res.data && res.data.flag
        if (flag > -1) {
          scanResult(res.data.mergeDetail, res.data.detail)
          handleClose()
        } else {
          proxy.$message({
            message: `扫码报错！`,
            type: 'warning',
            duration: 3500,
            showClose: true,
          })
        }
      } else {
        inputMainCode.value = ''
        delete props.query.queryParams.mainCode
      }
    })
    .catch(() => {
      inputMainCode.value = ''
      delete props.query.queryParams.mainCode
    })
}
function scanResult(mergeDetail, detail) {
  mergeDetail[0].isChoice = true
  mergeDetail[0].depotStockId = mergeDetail[0].id
  detail.isChoice = true
  detail.depotStockId = detail.id
  proxy.$emit(
    'callback',
    { mergeDetail: mergeDetail, detail: detail },
    (val) => {
      if (val) {
        proxy.$message({
          message: `该产品已在列表中或重复扫码或没有可处理的数量`,
          type: 'warning',
          duration: 3500,
          showClose: true,
        })
      } else {
        proxy.$message({
          message: `扫码成功`,
          type: 'success',
          duration: 3500,
          showClose: true,
        })
      }
    }
  )
}

function scanProgressSub(data) {
  dialogSubCodeVisible.value = true
  productDetail.value = { ...data }
  let timer = setTimeout(() => {
    proxy.$refs.subCodeRef.focus()
    clearTimeout(timer)
  }, 100)
  console.log(props.query)
}
function scanProgressMain() {
  dialogMainCodeVisible.value = true
  let timer = setTimeout(() => {
    proxy.$refs.mainCodeRef.focus()
    clearTimeout(timer)
  }, 100)
  console.log(props.query)
}
function handleClose() {
  inputSubCode.value = undefined
  inputMainCode.value = undefined
  code.value = undefined
  dialogSubCodeVisible.value = false
  dialogMainCodeVisible.value = false
  if (props.query.queryParams.mainCode) {
    delete props.query.queryParams.mainCode
  }
  if (props.query.queryParams.code) {
    delete props.query.queryParams.code
  }
  if (props.query.queryParams.subCode) {
    delete props.query.queryParams.subCode
  }
  console.log(props.query)
}
function handleSubClose() {
  inputSubCode.value = undefined
  code.value = undefined
  if (props.query.queryParams.mainCode) {
    delete props.query.queryParams.mainCode
  }
  if (props.query.queryParams.code) {
    delete props.query.queryParams.code
  }
  if (props.query.queryParams.subCode) {
    delete props.query.queryParams.subCode
  }
  dialogSubCodeVisible.value = false
}
function handleMainClose() {
  inputMainCode.value = undefined
  code.value = undefined
  if (props.query.queryParams.mainCode) {
    delete props.query.queryParams.mainCode
  }
  if (props.query.queryParams.code) {
    delete props.query.queryParams.code
  }
  if (props.query.queryParams.subCode) {
    delete props.query.queryParams.subCode
  }
  dialogMainCodeVisible.value = false
}
</script>

<style scoped></style>
